<template class = "body-notice">
  <div class="content-notice">
    <h2>公告信息</h2>
    <el-divider></el-divider>
    <div class="notice-list">
      <ul v-infinite-scroll="load" infinite-scroll-disabled="disabled">
        <li v-for="(item,index) in notices" class="list-item" :key="index">
          <item-notice :data="item" />
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
    </div>
  </div>
</template>

<script>
import item from "./Item.vue";

export default {
  components: {
    "item-notice": item,
  },
  data() {
    return {
      notices: [],
      searchFormData: {
        pageOn: 1,
        pageSize: 5,
        orderBy: "createTime",
        data: {
          del: "0",
          available: "1",
        },
      },
      loading: false,
      noMore: false,
    };
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.searchFormData.pageOn++;
      this.getNotice();
    },
    // 获取公告信息
    getNotice() {
      this.loading = true;
      this.COMMON.httpPost(
        this,
        "noticeOperation/getPage",
        this.searchFormData,
        (result) => {
          if (result.result === "SUCCESS") {
            this.loading = false;
            if (result.list === null || result.list.length === 0) {
              this.noMore = true;
              this.$message({
                message: "没有更多了",
                type: "warning",
              });
            } else {
              Array.prototype.push.apply(this.notices, result.list);
            }
          }
        },
        (result) => {}
      );
    },
  },
  mounted: function () {
    this.getNotice();
  },
};
</script>

<style>
/* 该行代码实现隐藏滚动条但是能进行滚轮 */
::-webkit-scrollbar {
  display: none;
}
.notice-list {
  overflow: auto;
  height: 70%;
}
ul {
  list-style-type: none;
}
.body-notice {
  width: 100%;
  height: 100%;
}
.content-notice {
  margin-top: 10px;
  width: 60%;
  height: 100%;
  margin: 10px auto;
  background-color: rgb(255, 255, 255);
}
h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding-left: 20px;
  padding-top: 20px;
}
</style>